<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>定位后规划线路</title>

    <link rel="stylesheet" type="text/css" href="./style.css">
    <script src="./js/zepto.min.js"></script>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=9ffe42e17300a715aebd32d0ba66b55a'></script>
</head>
<body>
<div  style="width:100%;height:100%;position:absolute;overflow:hidden">
    <div class='wrap'  style="width:200%;height:100%;position:absolute">
        <div class='left'>
            <header class ='title top' style="line-height: 41px"><span>请点击酒店定位选择导航</span>
                <input style="position:absolute;top:4px;right: 10px;width:15%;background-color:#00a2d4;color:white;border-radius: 3px" class="goBack" type="button" value="返回" onclick="history.go(-1)">
            </header>
            <div class = 'info top' >
            </div>
            <div id="container" class="map" tabindex="0"></div>
            <div class='bottom start'  >
                <img src="./images/hotNew.png" />
                <div class='bottomright' >
                    <div id='origin' >你的位置</div>
                </div>
            </div>
            <div class='bottom end'  >
                <img src="./images/hotNewRed.png" />
                <div class='bottomright' >
                    <div id='destination' >你要去哪儿</div>
                </div>
            </div>
            <!-- <button id='driving'>开车去</button> -->
        </div>
        <div class='right'>
            <header class ='title top'>
                <a href='javascript:void(0)' id='back'>返回</a>
                <div>地点搜索</div>
            </header>
            <div class='top' style='height:40px;' >
                <div style='margin-top:2px'>
                    <input id='search' value=''/>
                </div>
                <img id='searchButton' src="./images/search.gif"/>
            </div>
            <div id="searchResult"></div>
        </div>
        <div id='locating' style='display:none'>
            <img src='./images/loading.gif'/><div>定位中,请稍候...</div>
        </div>
    </div>
</div>
<script type="text/javascript">
           // 创建地图
           var map = new AMap.Map('container', {
               resizeEnable: true,
               zoom:11,
//               center: [116.397428, 39.90923]
           });
           // 給地图添加缩放工具条,默认显示在右下角
           var toolBar = new AMap.ToolBar({});
           map.addControl(toolBar);

           //起点（用户位置）的marker标记
           destination
//           //目的地的marker标记
//           var endMarker = new AMap.Marker({
//               content:"<img style='width:19px;height:32px' src='./images/ends.png'/>",
//               offset:new AMap.Pixel(-10,-32),
//           })
           //创建驾车路线规划组件
           var driving = new AMap.Driving({
               map:map,
               hideMarkers:true
           });

//           var  wrap= document.getElementsByClassName('wrap')[0];
//           //显示控制，执行后显示地图页面
//           var showLeftView = function(){
//               AMap.event.removeListener(placeSearch.listElementClickHandler);
//               AMap.event.removeListener(autoComplete.selectHandler);
//               placeSearch.clear();
//               wrap.className = 'wrap';
//           }
           //显示控制，执行后显示搜索页面
//           var showRightView = function(onShowed){
//               wrap.className = 'wrap rightShow';
//           }
//           //点击返回，页面由搜索页面返回显示页面
//           AMap.event.addDomListener(document.getElementById('back'),'click',showLeftView);


               console.log(sessionStorage.getItem("curAdress"));
               var curPlace = sessionStorage.getItem("curAdress");
               var placeSearch = new AMap.PlaceSearch();
               //关键字查询
               placeSearch.search(curPlace,callback);
               function callback(status,result){
                   console.log(result);
                   map.setZoomAndCenter(14,[result.poiList.pois[0].location.lng,result.poiList.pois[0].location.lat]);
//                   endMarker.setMap(map)
                   addMarker([result.poiList.pois[0].location.lng,result.poiList.pois[0].location.lat]);
               }
               function addMarker(pos) {
                   map.clearMap();
                   var marker = new AMap.Marker({
                       map: map,
                       content:"<img style='width:19px;height:32px' src='./images/ends.png'/>",
                       position: pos
                   });
                   marker.setMap(map);

                   //鼠标点击marker弹出自定义的信息窗体
                   console.log(infoWindow)
//                   infoWindow.open(map, marker.getPosition())
                   AMap.event.addListener(marker, 'click', function() {
                       console.log("11111111")
//                       infoWindow.open(map, marker.getPosition());
                   });
               }



               //实例化信息窗体
               var title = '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
                       content = [];
               content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
               content.push("电话：010-64733333");
               content.push("<a href='http://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");
               window.infoWindow = new AMap.InfoWindow({
                   isCustom: true,  //使用自定义窗体
                   content: createInfoWindow(title, content.join("<br/>")),
                   offset: new AMap.Pixel(16, -45)
               });

               //构建自定义信息窗体
               function createInfoWindow(title, content) {
                   var info = document.createElement("div");
                   info.className = "info";

                   //可以通过下面的方式修改自定义窗体的宽高
                   //info.style.width = "400px";
                   // 定义顶部标题
                   var top = document.createElement("div");
                   var titleD = document.createElement("div");
                   var closeX = document.createElement("img");
                   top.className = "info-top";
                   titleD.innerHTML = title;
                   closeX.src = "http://webapi.amap.com/images/close2.gif";
                   closeX.onclick = closeInfoWindow;

                   top.appendChild(titleD);
                   top.appendChild(closeX);
                   info.appendChild(top);

                   // 定义中部内容
                   var middle = document.createElement("div");
                   middle.className = "info-middle";
                   middle.style.backgroundColor = 'white';
                   middle.innerHTML = content;
                   info.appendChild(middle);

                   // 定义底部内容
                   var bottom = document.createElement("div");
                   bottom.className = "info-bottom";
                   bottom.style.position = 'relative';
                   bottom.style.top = '0px';
                   bottom.style.margin = '0 auto';
                   var sharp = document.createElement("img");
                   sharp.src = "http://webapi.amap.com/images/sharp.png";
                   bottom.appendChild(sharp);
                   info.appendChild(bottom);
                   return info;
               }

               //关闭信息窗体
               function closeInfoWindow() {
                   map.clearInfoWindow();
               }


</script>
<script>

</script>
<!--<script type="text/javascript" src='./js/locate.js'></script>-->
<!--<script type="text/javascript" src='./js/search.js'></script>-->
</body>
</html>